<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Hello World!</title>
    <script type="module" src="../renderer.js"></script>
</head>
<body>
    <div class="view-container">
        <!-- 实时显示区域 -->
        <canvas id="view-canvas" width="640" height="480"></canvas>
        <div id="view-side">
            <span>历史数据</span>
            <button id="view-side-data-clear">清空</button>
            <div id="view-side-data">

            </div>
        </div>
    </div>
    <!-- <div class="controls">
        <button id="btn">上</button>
        <button id="down-btn">下</button>
        <button id="left-btn">左</button>
        <button id="right-btn">右</button>
        <button id="reset-btn">重置</button>
    </div> -->
    <div class="status">
        <!-- 状态指示 -->
        <div class="statusC">
            <div>云台连接状态：<span id="connection-status">未链接</span></div>
            <div id="com">
                <span>可选端口：</span>
                <select id="com-select">

                </select>
            </div>
            <div>
                <button id="com-link">链接</button>
                <button id="com-close">关闭链接</button>
            </div>
        </div>
        <div id="the-xyz">
            <div id="last-xyz-div">
                <span id="last-xyz-title">最后触碰位置</span>
                <div id="last-xyz">
                    <p>x轴：<span id="x">0.0</span>	&nbsp; <span id="x-unit">mm</span></p>
                    <p>y轴：<span id="y">0.0</span> &nbsp; <span id="y-unit">mm</span></p>
                    <p>z轴：<span id="z">0.0</span> &nbsp; <span id="z-unit">mm</span></p>
                </div>
            </div>
            <div id="calculate-div">
                <div id="calculate-select-div">
                    <span id="calculate-title">计算选择：</span>
                    <select id="calculate-select">
                        <option value="two-point-length">两点长度</option>
                        <option value="three-point-circle-area">三点圆面积</option>
                        <option value="three-point-cube-volume">四点方形体积</option>
                    </select>
                </div>
                <div id="calculate">
                    <p><div id="calculate-result-title">长度：</div><span id="calculate-result">0.0</span> &nbsp; <span id="calculate-result-unit">mm</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- <script>
        // 模拟云台控制逻辑
        document.getElementById('up-btn').addEventListener('click', () => {
            console.log('云台向上移动');
        });
        document.getElementById('down-btn').addEventListener('click', () => {
            console.log('云台向下移动');
        });
        document.getElementById('left-btn').addEventListener('click', () => {
            console.log('云台向左移动');
        });
        document.getElementById('right-btn').addEventListener('click', () => {
            console.log('云台向右移动');
        });
        document.getElementById('reset-btn').addEventListener('click', () => {
            console.log('云台重置');
        });
    </script> -->
</body>

</html>